<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .checkBox{height:20px;cursor: pointer;}
        .box{position: relative;width:20px;height:15px;display: inline-block;}
        .checkBox span{position: absolute;width:10px;height:20px;background: #ccc;border-radius: 5px 5px 0px 0px;}
        .checkBox span:nth-child(1){transform: rotate(-45deg);}
        .checkBox span:nth-child(2){transform: translateX(7px) rotate(45deg);}
    </style>
</head>
<body>
    <div class="app">
        
        <!-- 自定义属性：向子组件传入数据 -->
        <Check-Box
            v-for="item in goods"
            :checked="item.flag"
            :id="item.id"
            @change="onChange"
            :title="item.title"
        ></Check-Box>

        <!-- checked:布尔值，表示默认复选框状态 -->
        <!-- id：字符，表示当前复选框的唯一标记 -->
        <!-- title：复选框后的描述文字 -->
        <!-- change：事件，当复选项框状态改变时触发，接收两个参数，id和状态 -->

        <Check-Box
            :checked="allCheck"
            @change="onAllCheck"
            id="001"
            title="全选"
        ></Check-Box>
        
    </div>
</body>
<template id="checkBox">
    <div class="checkBox" :index="id" @click="send">
        <div class="box">
            <span :style="{background:color}"></span>
            <span :style="{background:color}"></span>
        </div>
        {{title}}
    </div>
</template>
<script src="../vue.global.js"></script>
<script>
    // 修改样式
    // 单个复选框功能：
    // 选中状态
        // 默认状态：父传子传进去的
        // 修改状态：在子内修改，改好后，传给父
    
    Vue.createApp({
        data(){
            return {
                goods:[{
                    id:"13412",
                    flag:true,
                    title:"电脑"
                },{
                    id:"3425",
                    flag:true,
                    title:"手机"
                },{
                    id:"asfaf",
                    flag:true,
                    title:"篮球"
                },{
                    id:"4747",
                    flag:true,
                    title:"足球"
                }]
            }
        },
        methods:{
            onChange(id, v){
                // 从父组件中接收到的子组件的数据
                // console.log(id, v);
                let i = 0;
                this.goods.some((val,idx)=>{
                    i = idx;
                    return val.id === id;
                })
                this.goods[i].flag = v;
            },
            onAllCheck(id, v){
                this.goods.forEach(val=>{
                    val.flag = v;
                })
            }
        },
        computed:{
            allCheck(){
                return this.goods.every(val=>val.flag)
            }
        },
        components:{
            CheckBox:{
                template:"#checkBox",
                data(){
                    return {
                        flag:null
                    }
                },
                // created(){
                //     this.flag = this.checked;
                // },
                // updated() {
                //     this.flag = this.checked;
                // },
                // 立即执行的watch，设置初始值
                // 数据更新后的watch，同步最新值
                watch:{
                    checked:{
                        handler(n){
                            this.flag = n;
                        },
                        immediate: true
                    }
                },
                // 接收父组件传入的数据
                props:{
                    checked:{
                        type: Boolean,
                        default: false
                    },
                    id:{},
                    title:{}
                },
                computed: {
                    color(){
                        return this.flag ? "red" : "#ccc";
                    }
                },
                emits:["change"],
                methods:{
                    send(eve){
                        this.flag = !this.flag;
                        // 向父组件发送数据
                        this.$emit("change", this.id, this.flag, eve);
                    }
                }
            }
        }
    }).mount(".app")

</script>
</html>